<template>
	<view>
		<nav-bar backState="1000" fontColor="#FFF" bgColor="#007aff" :titleCenter="true" title="签名">
		</nav-bar>
		<view style="width: 750rpx ;height: calc(100vh - 200rpx);">
			<l-signature disableScroll backgroundColor="#fff" ref="signatureRef" :penColor="penColor" :penSize="penSize"
				:openSmooth="openSmooth"></l-signature>
		</view>
		<view class="btn-ws">
			<button size="mini" @click="onClick('clear')">清空</button>
			<button size="mini" type="warn" @click="onClick('undo')">撤消</button>
			<button size="mini" type="primary" @click="onClick('save')">保存</button>
			<!-- <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button> -->
		</view>
	</view>
</template>

<script>
	import lSignature from '@/components/lime-signature/components/l-signature/l-signature.vue'
	export default {
		components: {
			lSignature
		},
		data() {
			return {
				title: 'Hello',
				penColor: 'red',
				penSize: 5,
				url: '',
				openSmooth: true
			}
		},
		methods: {
			onClick(type) {
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							// 生成图片的临时路径
							// app | H5 | 微信小程序 生成的是base64
							this.url = res.tempFilePath
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-ws {
		display: flex;
		padding: 0 10rpx;
	}
	uni-button[size=mini]{
		padding: 0 30rpx;
	}
</style>
